$blue_1: #99c1f1;
$blue_2: #62a0ea;
$blue_3: #3584e4;
$blue_4: #1c71d8;
$blue_5: #1a5fb4;
$green_1: #8ff0a4;
$green_2: #57e389;
$green_3: #33d17a;
$green_4: #2ec27e;
$green_5: #26a269;
$yellow_1: #f9f06b;
$yellow_2: #f8e45c;
$yellow_3: #f6d32d;
$yellow_4: #f5c211;
$yellow_5: #e5a50a;
$orange_1: #ffbe6f;
$orange_2: #ffa348;
$orange_3: #ff7800;
$orange_4: #e66100;
$orange_5: #c64600;
$red_1: #f66151;
$red_2: #ed333b;
$red_3: #e01b24;
$red_4: #c01c28;
$red_5: #a51d2d;
$purple_1: #dc8add;
$purple_2: #c061cb;
$purple_3: #9141ac;
$purple_4: #813d9c;
$purple_5: #613583;
$brown_1: #cdab8f;
$brown_2: #b5835a;
$brown_3: #986a44;
$brown_4: #865e3c;
$brown_5: #63452c;
$light_1: #ffffff;
$light_2: #f6f5f4;
$light_3: #deddda;
$light_4: #c0bfbc;
$light_5: #9a9996;
$dark_1: #77767b;
$dark_2: #5e5c64;
$dark_3: #3d3846;
$dark_4: #241f31;
$dark_5: #000000;

@if $gnome_version == 'new' {
  :root {
    --blue-1: #{$blue_1};
    --blue-2: #{$blue_2};
    --blue-3: #{$blue_3};
    --blue-4: #{$blue_4};
    --blue-5: #{$blue_5};
    --green-1: #{$green_1};
    --green-2: #{$green_2};
    --green-3: #{$green_3};
    --green-4: #{$green_4};
    --green-5: #{$green_5};
    --yellow-1: #{$yellow_1};
    --yellow-2: #{$yellow_2};
    --yellow-3: #{$yellow_3};
    --yellow-4: #{$yellow_4};
    --yellow-5: #{$yellow_5};
    --orange-1: #{$orange_1};
    --orange-2: #{$orange_2};
    --orange-3: #{$orange_3};
    --orange-4: #{$orange_4};
    --orange-5: #{$orange_5};
    --red-1: #{$red_1};
    --red-2: #{$red_2};
    --red-3: #{$red_3};
    --red-4: #{$red_4};
    --red-5: #{$red_5};
    --purple-1: #{$purple_1};
    --purple-2: #{$purple_2};
    --purple-3: #{$purple_3};
    --purple-4: #{$purple_4};
    --purple-5: #{$purple_5};
    --brown-1: #{$brown_1};
    --brown-2: #{$brown_2};
    --brown-3: #{$brown_3};
    --brown-4: #{$brown_4};
    --brown-5: #{$brown_5};
    --light-1: #{$light_1};
    --light-2: #{$light_2};
    --light-3: #{$light_3};
    --light-4: #{$light_4};
    --light-5: #{$light_5};
    --dark-1: #{$dark_1};
    --dark-2: #{$dark_2};
    --dark-3: #{$dark_3};
    --dark-4: #{$dark_4};
    --dark-5: #{$dark_5};
  }
}

// Sass thinks we're using the colors in the variables as strings and may shoot
// warning, it's innocuous and can be defeated by using #{$var}.

@define-color blue_1 #{$blue_1};
@define-color blue_2 #{$blue_2};
@define-color blue_3 #{$blue_3};
@define-color blue_4 #{$blue_4};
@define-color blue_5 #{$blue_5};
@define-color green_1 #{$green_1};
@define-color green_2 #{$green_2};
@define-color green_3 #{$green_3};
@define-color green_4 #{$green_4};
@define-color green_5 #{$green_5};
@define-color yellow_1 #{$yellow_1};
@define-color yellow_2 #{$yellow_2};
@define-color yellow_3 #{$yellow_3};
@define-color yellow_4 #{$yellow_4};
@define-color yellow_5 #{$yellow_5};
@define-color orange_1 #{$orange_1};
@define-color orange_2 #{$orange_2};
@define-color orange_3 #{$orange_3};
@define-color orange_4 #{$orange_4};
@define-color orange_5 #{$orange_5};
@define-color red_1 #{$red_1};
@define-color red_2 #{$red_2};
@define-color red_3 #{$red_3};
@define-color red_4 #{$red_4};
@define-color red_5 #{$red_5};
@define-color purple_1 #{$purple_1};
@define-color purple_2 #{$purple_2};
@define-color purple_3 #{$purple_3};
@define-color purple_4 #{$purple_4};
@define-color purple_5 #{$purple_5};
@define-color brown_1 #{$brown_1};
@define-color brown_2 #{$brown_2};
@define-color brown_3 #{$brown_3};
@define-color brown_4 #{$brown_4};
@define-color brown_5 #{$brown_5};
@define-color light_1 #{$light_1};
@define-color light_2 #{$light_2};
@define-color light_3 #{$light_3};
@define-color light_4 #{$light_4};
@define-color light_5 #{$light_5};
@define-color dark_1 #{$dark_1};
@define-color dark_2 #{$dark_2};
@define-color dark_3 #{$dark_3};
@define-color dark_4 #{$dark_4};
@define-color dark_5 #{$dark_5};

/* GTK NAMED COLORS
   ----------------
   use responsibly! */

// Sass thinks we're using the colors in the variables as strings and may shoot
// warning, it's innocuous and can be defeated by using #{$var}.

// These are the colors apps are can override. We define the defaults here and
// define variables for them in _colors.scss

// The main accent color and the matching text value

@if $gnome_version == 'old' or $accent_type == 'fixed' {
  @define-color accent_bg_color #{$primary_color};
  @define-color accent_fg_color #{$light_fg_color};
  @define-color accent_color #{$primary_color};

  // destructive-action buttons
  @define-color destructive_bg_color #{$destructive_color};
  @define-color destructive_fg_color #{$light_fg_color};
  @define-color destructive_color #{$destructive_color};
  
  // Levelbars, entries, labels and infobars. These don't need text colors
  @define-color success_bg_color #{$success_color};
  @define-color success_fg_color #{$light_fg_color};
  @define-color success_color #{$success_color};
  
  @define-color warning_bg_color #{$warning_color};
  @define-color warning_fg_color #{$light_fg_color};
  @define-color warning_color #{$warning_color};
  
  @define-color error_bg_color #{$error_color};
  @define-color error_fg_color #{$light_fg_color};
  @define-color error_color #{$error_color};
  
  // Window
  @define-color window_bg_color #{$bg_color};
  @define-color window_fg_color #{$text_color};
  
  // Views - e.g. text view or tree view
  @define-color view_bg_color #{$base_color};
  @define-color view_fg_color #{$text_color};
  
  // Header bar, search bar, tab bar
  @define-color headerbar_bg_color #{$header_bg};
  @define-color headerbar_fg_color #{$header_fg};
  @define-color headerbar_border_color #{$borders_color};
  @define-color headerbar_backdrop_color #{$header_bg_backdrop};
  @define-color headerbar_shade_color #{$header_border};
  @define-color headerbar_darker_shade_color #{$header_border};
  
  // Split pane views
  @define-color sidebar_bg_color #{$dark_sidebar_bg};
  @define-color sidebar_fg_color #{$dark_sidebar_fg};
  @define-color sidebar_backdrop_color #{$dark_sidebar_bg};
  @define-color sidebar_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
  @define-color sidebar_border_color #{gtkalpha($dark_sidebar_fg, .08)};
  
  @define-color secondary_sidebar_bg_color #{$base_color};
  @define-color secondary_sidebar_fg_color #{$text_color};
  @define-color secondary_sidebar_backdrop_color #{$bg_color};
  @define-color secondary_sidebar_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
  @define-color secondary_sidebar_border_color #{$borders_color};

  // Cards, boxed lists
  @define-color card_bg_color #{$base_color};
  @define-color card_fg_color #{$text_color};
  @define-color card_shade_color #{$borders_color};
  
  // Dialogs
  @define-color dialog_bg_color #{$dialog_bg_color};
  @define-color dialog_fg_color #{$text_color};
  
  // Popovers
  @define-color popover_bg_color #{$menu_bg};
  @define-color popover_fg_color #{$text_color};
  @define-color popover_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
  
  // Thumbnails
  @define-color thumbnail_bg_color #{gtkmix($base_color, $bg_color, 50%)};
  @define-color thumbnail_fg_color #{$text_color};

  // Miscellaneous
  @define-color shade_color #{$borders_color};
  @define-color scrollbar_outline_color #{$borders_color};
}

@if $gnome_version == 'new' and $accent_type != 'fixed' {
  :root {
    --accent-blue: #{$theme_color_default};
    --accent-teal: #2190a4;
    --accent-green: #{$theme_color_green};
    --accent-yellow: #{$theme_color_yellow};
    --accent-orange: #{$theme_color_orange};
    --accent-red: #{$theme_color_red};
    --accent-pink: #{$theme_color_pink};
    --accent-purple: #{$theme_color_purple};
    --accent-slate: #6f8396;

    --accent-color: @accent_bg_color;
    --accent-bg-color: @accent_bg_color;
    --accent-fg-color: @accent_fg_color;
  }

  $selected_bg_color: gtkcolor(accent_bg_color);
  $primary_color: gtkcolor(accent_bg_color);
  $progress_color: gtkcolor(accent_bg_color);
  $selected_bg_color: gtkcolor(accent_bg_color);
  $primary_color: gtkcolor(accent_bg_color);
  $progress_color: gtkcolor(accent_bg_color);
  $selection_mode_bg: color-mix(in srgb, white 25%, gtkcolor(accent_bg_color));
  $entry_highlight: color-mix(in srgb, gtkcolor(window_bg_color) 25%, $selection_mode_bg);

  $bg_color: gtkcolor(window_bg_color);
  $base_color: gtkcolor(view_bg_color);

  $text_color: gtkcolor(window_fg_color);
  $fg_color: gtkcolor(window_fg_color);
  $alt_fg_color: gtkalpha($fg_color, 0.8);
  $hint_fg_color: gtkalpha($fg_color, 0.6);
  $disabled_fg_color: gtkalpha($fg_color, 0.45);
  $alt_disabled_fg_color: gtkalpha($fg_color, 0.35);

  $borders_color:                     gtkalpha(currentColor, 0.12);
  $light_borders_color:               if($variant == 'light', gtkalpha(currentColor, 0.08), gtkalpha(currentColor, 0.10));
  $solid_borders_color:               if($variant == 'light', gtkmix(currentColor, $base_color, 12%), gtkmix(currentColor, $base_color, 12%));
  $dark_solid_borders_color:          if($variant == 'light', gtkmix(currentColor, $base_color, 12%), gtkmix(currentColor, $base_color, 15%));

  $entry_bg:                          gtkalpha(currentColor, 0.05);
  $entry_border:                      $borders_color;

  $button_bg:                         gtkcolor(card_bg_color);
  $button_border:                     $borders_color;
  $button_highlight:                  if($variant == 'light', white, rgba(white, 0.1));
  $button_borders:                    if($variant == 'light', $button_border, $dark_borders_color);

  $header_bg: gtkcolor(headerbar_bg_color);
  $header_fg: gtkcolor(headerbar_fg_color);
  $header_border: gtkcolor(headerbar_darker_shade_color);
  $header_bg_backdrop: gtkcolor(headerbar_backdrop_color);
  $header_border_backdrop: gtkcolor(headerbar_shade_color);

  $dialog_bg_color: gtkcolor(dialog_bg_color);
  $dialog_fg_color: gtkcolor(dialog_fg_color);

  $dark_sidebar_bg: gtkcolor(sidebar_bg_color);
  $dark_sidebar_fg: gtkcolor(sidebar_fg_color);
  $dark_sidebar_border: gtkcolor(headerbar_darker_shade_color);

  $menu_bg: gtkcolor(popover_bg_color);
  $menu_fg: gtkcolor(popover_fg_color);
  $menu_bd: if($variant == 'light', gtkalpha(currentColor, 0.08), gtkalpha(currentColor, 0.07));

  $wm_outline: 0 0 0 2px rgba(black, 0.03), 0 0 0 1px gtkcolor(headerbar_darker_shade_color);
  $wm_border: gtkcolor(headerbar_darker_shade_color);

  @if $trans=='true' {
    $bg_color: color-mix(in srgb, gtkcolor(window_bg_color) 96%, transparent);
    $dark_sidebar_bg: color-mix(in srgb, gtkcolor(sidebar_bg_color) 96%, transparent);
    $menu_bg: color-mix(in srgb, gtkcolor(popover_bg_color) 96%, transparent);
  }
}
